<html>
  <head>
    <style></style>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
      html,body { margin: 0; padding: 0; }
      .box canvas {
        border-right: 1px solid #aaaaaa40;
        border-bottom: 1px solid #aaaaaa40;
        background-image:
        linear-gradient(#aaaaaa40 1px, transparent 0),
        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
        linear-gradient(#aaa 1px, transparent 0),
        linear-gradient(90deg, #aaa 1px, transparent 0);
        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
      }
      .list {
        width: 920px;
        overflow: hidden;
        border-top: 1px solid #f0f0f0;
        border-left: 1px solid #f0f0f0;
      }
      .box {
        width: 302;
        min-height: 220;
        float: left;
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        padding: 10px 0;
      }
      .box .title {
        text-align: center;
        font-size: 14px;
        color: #000;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        width: 100%;
        font-family: monospace;
      }
    </style>
  </head>
  <body>

    <div class="list">
      <div class="box" id="mount-1">
        <div class="title">setData and scale(2)</div>
      </div>
      <div class="box" id="mount-2">
        <div class="title">exportDataURL('image/png')</div>
      </div>
      <div class="box" id="mount-3">
        <div class="title">exportDataURL('image/jpeg')</div>
      </div>
      <div class="box" id="mount-4">
        <div class="title">toDataURL('image/png')</div>
      </div>
      <div class="box" id="mount-5">
        <div class="title">toDataURL('image/jpeg')</div>
      </div>
      <div class="box" id="mount-6">
        
      </div>
    </div>

    <script src="../../../packages/idraw/dist/index.global.js"></script>
    <script>
      const testData = {
        bgColor: "#ffffff",
        elements: [
          {
            name: "rect-001",
            x: 5,
            y: 5,
            w: 100,
            h: 50,
            type: "rect",
            desc: {
              bgColor: "#ffeb3b",
              borderRadius: 10,
              borderWidth: 5,
              borderColor: "#ffc107",
            },
          },
          {
            name: "text-002",
            x: 40,
            y: 40,
            w: 100,
            h: 60,
            // angle: 30,
            type: "text",
            desc: {
              fontSize: 16,
              text: "Hello Text",
              fontWeight: 'bold',
              color: "#666666",
              borderRadius: 30,
              borderWidth: 4,
              borderColor: "#ff5722",
            },
          },
          {
            name: "image-003",
            x: 80,
            y: 80,
            w: 160,
            h: 80,
            type: "image",
            desc: {
              src: './../../../core/examples/images/computer.png',
            },
          },
          {
            name: "svg-004",
            x: 200 - 5,
            y: 150 - 50,
            w: 100,
            h: 100,
            type: "svg",
            desc: {
              svg: '<svg t="1622524892065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9337" width="200" height="200"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="9338"></path></svg>',
            },
          },
        ],
      };


    </script>
    <script>
      var iDraw = window.iDraw;
      var opts = {
        width: 300,
        height: 200,
        contextWidth: 300,
        contextHeight: 200,
        devicePixelRatio: 4,
      }
      var config = {
        elementWrapper: {
          controllerSize: 4,
        }
      }
    </script>
    <script>
      (function() {
        const mount = document.querySelector('#mount-1');
        const idraw = new iDraw(mount, opts, config);
        idraw.setData(testData);
        // idraw.setOnlyRender();

        idraw.scale(2);
        idraw.selectElementByIndex(1);

        setTimeout(async () => {
          const pngSrc = await idraw.exportDataURL('image/png');
          const mount2 = document.querySelector('#mount-2');
          const imgPNG = new window.Image();
          imgPNG.src = pngSrc;
          imgPNG.width = mount2.getBoundingClientRect().width;
          mount2.appendChild(imgPNG);

          const jpgSrc = await idraw.exportDataURL('image/jpeg');
          const mount3 = document.querySelector('#mount-3');
          const imgJPG = new window.Image();
          imgJPG.src = jpgSrc;
          imgJPG.width = mount3.getBoundingClientRect().width;
          mount3.appendChild(imgJPG);

          setTimeout(() => {
            const pngSrc = idraw.toDataURL('image/png');
            const mount4 = document.querySelector('#mount-4');
            const imgPNG = new window.Image();
            imgPNG.src = pngSrc;
            imgPNG.width = mount4.getBoundingClientRect().width;
            mount4.appendChild(imgPNG);

            const jpgSrc = idraw.toDataURL('image/jpeg');
            const mount5 = document.querySelector('#mount-5');
            const imgJPG = new window.Image();
            imgJPG.src = jpgSrc;
            imgJPG.width = mount5.getBoundingClientRect().width;
            mount5.appendChild(imgJPG);
          }, 200);
        }, 100);
      })();
    </script>

   

  
  </body>
</html>